import React, { useCallback } from 'react'
import SurveyHeader from './SurveyHeader'
import ScaleContent from './ScaleContent'

const SurveyScale = ({
  data, language, onChange, disabled, questionType, required, ordinal, isShowTopLine, isPain,
}) => {
  const { QuestionText, Level, Choices, AnswerChoice } = data
  const onSelect = useCallback(val => {
    const { Label } = Choices[val]
    const newItem = { ...data, AnswerChoice: Label }
    onChange?.(newItem)
  }, [Choices, data, onChange])

  return (
    <>
      <SurveyHeader
        level={Level}
        questionType={questionType}
        label={QuestionText?.[language]}
        ordinal={ordinal}
        required={required}
        isShowTopLine={isShowTopLine}
      />
      <ScaleContent
        data={Choices}
        answerChoice={AnswerChoice}
        onSelect={onSelect}
        language={language}
        disabled={disabled}
        isPain={isPain}
        showBubble
      />
    </>
  )
}

export default SurveyScale
